<template>
  <div class="legend">
    <div class="legend-item" v-for="(item, index) in status" :key="index">
      <img :src="require(`@/assets/img/status/state${index + 1}.png`)" width="15" height="18" />
      <span style="margin: 0 8px">{{ item.label }}</span>
      <span v-if="!hiddenData">{{ item.data }}</span>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: Array,
      default: () => {
        return [
          { label: "运行", data: 0 },
          { label: "停止", data: 0 },
          { label: "故障", data: 0 },
          { label: "满纱满桶", data: 0 },
          { label: "通讯失败", data: 0 },
          { label: "计划停台", data: 0 }
        ];
      }
    },
    hiddenData: {
      type: Boolean
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.legend {
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #f2f6fe;
  .legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    & + .legend-item {
      margin-left: 20px;
    }
  }
}
</style>
